<!DOCTYPE html>
<html>
    <head>
      <title>Nightscout performance comparison</title>
      <link rel="apple-touch-icon" sizes="57x57" href="/images/apple-touch-icon-57x57.png">
      <link rel="apple-touch-icon" sizes="60x60" href="/images/apple-touch-icon-60x60.png">
      <link rel="apple-touch-icon" sizes="72x72" href="/images/apple-touch-icon-72x72.png">
      <link rel="apple-touch-icon" sizes="76x76" href="/images/apple-touch-icon-76x76.png">
      <link rel="apple-touch-icon" sizes="114x114" href="/images/apple-touch-icon-114x114.png">
      <link rel="apple-touch-icon" sizes="120x120" href="/images/apple-touch-icon-120x120.png">
      <link rel="apple-touch-icon" sizes="144x144" href="/images/apple-touch-icon-144x144.png">
      <link rel="apple-touch-icon" sizes="152x152" href="/images/apple-touch-icon-152x152.png">
      <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-180x180.png">
      <link rel="icon" type="image/png" href="/images/favicon-32x32.png" sizes="32x32">
      <link rel="icon" type="image/png" href="/images/android-chrome-192x192.png" sizes="192x192">
      <link rel="icon" type="image/png" href="/images/favicon-96x96.png" sizes="96x96">
      <link rel="icon" type="image/png" href="/images/favicon-16x16.png" sizes="16x16">
      <link rel="manifest" href="/manifest.json">
      <link rel="shortcut icon" href="/images/favicon.ico">
      <meta name="msapplication-TileColor" content="#00a300">
      <meta name="msapplication-TileImage" content="/images/mstile-144x144.png">
      <meta name="msapplication-config" content="/browserconfig.xml">
      <meta name="theme-color" content="#333333">

      <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
      <link rel="stylesheet" type="text/css" href="/colorbrewer/colorbrewer.css">
      <link rel="stylesheet" type="text/css" href="/css/report.css" />
      <link rel="stylesheet" type="text/css" href="css/compare.css" />
      <link rel="stylesheet" type="text/css" href="/css/ui-lightness/jquery-ui.min.css">    
    </head>
    <body>
      <h1><img src="/images/logo1.png"><span class="translate">Nightscout performance comparison</span></h1>
    <!--
    <div id="info"></div>
    <hr>
    <div id="pluginchartplaceholders"></div>
      <div id="chartContainer" ></div>
    -->
      <div id="toolbar">


        <a id="Add"></a>


        <div id="menu_holder">


        <ul id="menu" class="mfb-component--tr mfb-zoomin" data-mfb-toggle="hover">
          <li class="mfb-component__wrap">
            <a href="#" class="mfb-component__button--main">
              <i class="mfb-component__main-icon--resting ion-plus-round"></i>
              <i class="mfb-component__main-icon--active ion-close-round"></i>
            </a>
            <ul class="mfb-component__list">
              <li>
                <a href="#Details" data-mfb-label="Details" class="mfb-component__button--child">
                  <i class="mfb-component__child-icon ion-more"></i>
                </a>
              </li>
              <li>
                <a href="#Add" data-mfb-label="Add" class="mfb-component__button--child add-button">
                  <i class="mfb-component__child-icon ion-plus"></i>
                </a>
              </li>

            </ul>
          </li>
        </ul>
      
        </div>





<!--

        <div class="reticle">
          <div class="controls">
            <span class="begin"><input class="begin-input" value="two weeks ago"/></span>
            <span class="interstice">from</span>
            <span class="end"><input class="end-input" size=30 value="now"/></span>
          </div>
          <div class="timeline">
          </div>
        </div>
-->
      </div>
      <div id="view" class="collapse">
        <div class="ranges">
        </div>
        <div class="observations ">
        </div>
      
      </div>
      <div id="templates">
        <div class="reticle">
          <div class="controls">
            <span class="begin"><input class="begin-input" value="two weeks ago"/></span>
            <span class="interstice">from</span>
            <span class="end"><input class="end-input" size=30 value="now"/></span>
          </div>
          <div class="timeline">
          </div>
        </div>
          <div class="pool">
          </div>
        </div>
      </div>

      <hr>
      <b><span class="translate">Authentication status</span>: </b><span id="authentication_placeholder"></span>

      <script src="/api/v1/status.js"></script>
      <script src="/js/bundle.js"></script>
      <script src="/socket.io/socket.io.js"></script>
      <script src="/colorbrewer/colorbrewer.js"></script>
<!--
      <script src="/bower_components/jQuery-Storage-API/jquery.storageapi.min.js"></script>
      <script src="/bower_components/tipsy-jmalonzo/src/javascripts/jquery.tipsy.js"></script>
      <script src="/bower_components/jquery-flot/jquery.flot.js"></script>
      <script src="/bower_components/jquery-flot/jquery.flot.pie.js"></script>
      <script src="/bower_components/jquery-flot/jquery.flot.time.js"></script>
      <script src="/bower_components/jquery-flot/jquery.flot.fillbetween.js"></script>
      <script src="/bower_components/jquery-ui/jquery-ui.min.js"></script>
      <script src="/bower_components/colorbrewer/colorbrewer.js"></script>
-->
      <script src="/report/js/flotcandle.js"></script>
      <script src="js/report.js"></script>
      <script src="js/compare.js"></script>
      <script src="../mfb/mfb.js"></script>
      <script type="text/javascript">
        $(document).ready(function ( ) {
          var toolbar = $('#toolbar');
          var view = $('#view');
          var timeline = $('#toolbar .timeline');
          var templates = $('#templates');

          var manage_opts = {
            templates: templates
          }
          var pools = manager(view, [ ], manage_opts);

          var control = slippy(timeline,
            { controls: toolbar.find('.controls')
          } );

          $(window).on('hashchange', route_add);
          $('#menu').on('click', 'A.add-button', route_add);
          function route_add (ev) {
            pools.add_new( );
            console.log('Add', ev.target, arguments);
            ev.preventDefault( );
            return false;
          }
          var compare = { toolbar: toolbar, timeline: timeline, control: control};
          Nightscout.compare = compare;
        });
      </script>
    </body>
</html>
